Icon buttons 圖示按鈕


- 圖示按鈕採用系統圖示,便於使用者理解。
- 有普通和帶背景兩種基本型別。
- 滑鼠懸停時顯示功能提示。
- 按鈕顯示分為空心(未選中)和實心(選中)兩種狀態。
Filled icon button 填充圖示按鈕

Filled icon button states填充圖示按鈕狀態



| 屬性 | 數值 |
| 圖示尺寸 | 24dp |
| 容器尺寸 | 40dp |
| 點選目標區域 | 48dp |
色調填充圖示按鈕(Filled Tonal Icon Button)
色調填充圖示按鈕是一種特殊的按鈕型別。它比普通的填充按鈕看起來更輕柔,主要用於一些次要功能。這種設計讓使用者能夠輕鬆區分它和主要的填充按鈕。

Filled tonal icon button states填充色調圖示按鈕狀態



| 屬性 | 數值 |
| 圖示尺寸 | 24dp |
| 容器尺寸 | 40dp |
| 點選目標區域 | 48dp |
輪廓圖示按鈕(Outlined Icon Button)
輪廓圖示按鈕是一種帶邊框的按鈕樣式,外觀比較簡單輕巧。這種按鈕主要用來展示不太重要的功能選項,和實心的填充式按鈕形成明顯區別。

Outlined icon button states輪廓圖示按鈕狀態



| 屬性 | 數值 |
| 圖示尺寸 | 24dp |
| 容器尺寸 | 40dp |
| 點選目標區域 | 48dp |
Standard Icon Button 標準圖示按鈕
標準圖示按鈕僅由一個圖示(Icon)組成,適用於輕量級互動,如收藏、喜歡或分享。

Standard icon button states標準圖示按鈕狀態



| 屬性 | 數值 |
| 圖示尺寸 | 24dp |
| 狀態層大小 | 40dp |
| 點選目標區域 | 48dp |